<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>js字符串值标签模板</title>
  <style>
    #template ul {
      list-style: none;
    }
    #template ul li {
      border: 1px solid #ddd;
      margin-bottom: 10px;
      padding: 10px;
    }
    #template ul li > a {
      color: #16a085;
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div id="template"></div>
  <script>
    // tag
    const name = 'Miracle'
    const web = 'https://github.com/miracle-git'
    const res = tag`I'm ${name}, github: ${web}.`
    console.log(res)
    // function tag(strings, name, web) {
    //   console.log(strings)
    //   console.log(name)
    //   console.log(web)
    // }
    function tag(strings, ...vars) {
      console.log(strings)
      console.log(vars)
    }
    // 实例
    const blogs = [
      { title: '深入学习Miracle\'s Javascript', author: 'Miracle' },
      { title: '深度掌握Miracle\'s Vue', author: 'Miracle He' },
      { title: '从入门到实战Miracle\'s React', author: 'Miracle' }
    ]
    function template() {
      return `
        <ul>
          ${blogs.map(item => (
            links`<li>Blog: ${item.title}, Author: ${item.author}</li>`
          )).join('')}
        </ul>
      `
    }
    function links(strings, ...vars) {
      // console.log(strings)
      // console.log(vars)
      return strings.map((item, index) => (
        item + (vars[index] ? vars[index].replace('Miracle',
            '<a href="https://github.com/miracle-git" target="_blank">Miracle</a>') : '')
      )).join('')
    }
    document.getElementById('template').innerHTML = template()
  </script>
</body>
</html>